<template>
	<view class="fullPage p30">
		<view class="container pt200 border-r1 bf shadow">
			<!-- 仓门已打开 -->
			<view class="flex_aj column">
				<view class="flex_aj w230 h230 mb20 border-r50p b-green">
					<image src="/static/chongdian.png" mode="widthFix" style="width: 74upx;height: 110upx;"></image>
				</view>
				<view class="mb30">
					<text class="ft48">{{ socketInfo.cabinets }}</text>
					号仓门
				</view>
				<view class="mb80 lh40 tac">
					<view class="">请取回您的电池，取出后请关闭仓门</view>
				</view>
				<view class="pw100 plr60">
					<u-button type="primary" shape="circle" @click="back(1)">查看订单</u-button>
				</view>
				<view class="lh80"><text class="warning ft26" @click="reOpenChr">电池尚未取出？点这里</text></view>
			</view>
		</view>
	</view>
</template>

<script>
	import WS from '@/utils/socket'
	import {
		reOpenChr
	} from '@/api/user.js'
	export default {
		name: 'chargeProcess',
		data() {
			return {
				socketInfo: {}, // socket推送的消息信息
				$ws: null
			}
		},
		onLoad(e) {
			this.socketInfo = e
			console.log('这是我想要的', e);
		},
		onHide() {
			if (this.$ws) {
				this.$ws.close()
			}
		},
		beforeDestroy() {
			if (this.$ws) {
				this.$ws.close()
			}
		},
		methods: {
			// 点击重新开仓
			async reOpenChr() {
				this.socketInit()
				const res = await reOpenChr({
					orderNo: this.socketInfo.orderNo,
					openType: 2
				})
				uni.showLoading({
					title: '仓门正在开启中，请稍后',
					mask: true
				})
			},
			// 链接设备
			socketInit() {
				uni.showLoading({
					title: '正在连接设备',
					mask: true
				})

				let uri = `gzyh_device_result_` + this.socketInfo.orderNo
				this.$ws = new WS(uri)
				this.$ws.onNotify(uri, res => {
					console.log(res)
					if (res.code == 200) {
						uni.hideLoading()
						this.secketInfo = res.data
						this.resultHandle(res)
						this.$ws.close()
					}
				})
			},

			// 结果处理
			resultHandle(res) {
				const status = res.data.code
				if (status == 1) {
					uni.showToast({
						title: '仓门已开启',
						icon: 'success',
						mask: true,
						duration: 2000
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	@keyframes rotate {
		0% {
			transform: rotate(0deg);
		}

		50% {
			transform: rotate(180deg);
		}

		100% {
			transform: rotate(360deg);
		}
	}

	.jiazai {
		width: 134upx;
		height: 134upx;
		border-radius: 50%;
		animation: rotate 2s linear infinite;
		transform: rotate(0deg);
	}
</style>
